<template>
	<div class="courseclass">
		<div class="navget">
			<router-link to="/coursemanager/coursemanagement/courses" class="nava">课程</router-link>
			<router-link to="/coursemanager/coursemanagement/courseclass" style="color: black;"
				class="nava">班级</router-link>
		</div>
		<el-select placeholder="请选择班级" v-model="choose" class="coursechoose" @change="getclassid(choose)">
			<el-option v-for="item in classlist" :key="item.value" :label="item.clazzName"
				:value="item.clazzId"></el-option>
		</el-select>
		<el-button type="success" class="changeclass" @click="changetable()" :disabled="tableFlag">修改</el-button>
		<el-button type="primary" class="addclass" @click="addtable" icon="el-icon-circle-plus-outline">添加</el-button>
		<div class="tableFrom">
			<h4>{{ classname }}课程表</h4>
			<h4 v-if="tableFlag">暂无课表</h4>
			<el-table :data="tableData" border v-if="!tableFlag">
				<el-table-column prop="level" label="">
				</el-table-column>
				<el-table-column label="周一">
					<template slot-scope="scope">
						<p>{{ scope.row.list[0].courseName }}</p>
						<p>{{ scope.row.list[0].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周二">
					<template slot-scope="scope">
						<p>{{ scope.row.list[1].courseName }}</p>
						<p>{{ scope.row.list[1].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周三">
					<template slot-scope="scope">
						<p>{{ scope.row.list[2].courseName }}</p>
						<p>{{ scope.row.list[2].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周四">
					<template slot-scope="scope">
						<p>{{ scope.row.list[3].courseName }}</p>
						<p>{{ scope.row.list[3].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周五">
					<template slot-scope="scope">
						<p>{{ scope.row.list[4].courseName }}</p>
						<p>{{ scope.row.list[4].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周六">
					<template slot-scope="scope" v-if="scope.row.list[5]">
						<p>{{ scope.row.list[5].courseName }}</p>
						<p>{{ scope.row.list[5].courseTea }}</p>
					</template>
				</el-table-column>
				<el-table-column label="周日">
					<template slot-scope="scope" v-if="scope.row.list[6]">
						<p>{{ scope.row.list[6].courseName }}</p>
						<p>{{ scope.row.list[6].courseTea }}</p>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableFlag:true,
			input: "",
			choose: "",
			classlist: [],
			baseUrl: require("../js/baseUrl.js").baseUrl,
			tableData: [],
			classid: "",
			classname: "",
			tableFlag:true
		}
	},
	methods: {
		//修改
		changetable() {
			this.$router.push('/coursemanager/coursemanagement/changeclasstable?classid=' + this.classid + '&classname=' + this.classname)
		},
		//添加
		addtable() {
			this.$router.push('/coursemanager/coursemanagement/addclasstable')
		},
		//获取所有班级
		getclass() {
			this.$http.post(this.baseUrl + "SchoolSys/stu/clazzlist", {}).then(res => {
				//console.log(res);
				if (res.data.code == 200) {
					this.classlist = res.data.data
					console.log(this.classlist);
					this.getfirstclassid();
					this.showRandomClassTable()
				} else {
					this.$message.error(res.data.msg)
				}
			})
		},
		//随机显示课表(显示获取所有班级中第一个班级的课表)
		getfirstclassid() {
			if (!this.$route.query.classid) {
				if (this.classlist.length == 0) {
					this.$message.error("暂无班级")
				} else {
					this.classid = this.classlist[0].clazzId
					this.classname = this.classlist[0].clazzName
				}
			} else {
				this.classid = this.$route.query.classid
				this.classname = this.$route.query.classname
			}
		},
		showRandomClassTable() {
			this.$http.post(this.baseUrl + "SchoolSys/scha/searchByIClazz", {
				clazzId: this.classid
			}).then(res => {
				console.log("课表",res)
				//console.log(res.data.data);
				if (res.data.code == 200) {
					let resData = res.data.data
					//console.log(resData)
					let datas = []
					for (var i in resData) {
						//console.log(resData[i])
						let list = [];
						for (var k in resData[i]) {
							list.push({
								courseName: resData[i][k].subName,
								courseTea: resData[i][k].teaName,
								week: k,
								weekIndex: k.substring(1, 2)
							})
						}
						//排序list
						for (var m = 0; m < list.length; m++) {
							for (var k = m + 1; k < list.length; k++) {
								if (list[m].weekIndex > list[k].weekIndex) {
									let temp = list[m]
									list[m] = list[k]
									list[k] = temp
								}
							}
						}
						datas.push({
							index: i.substring(1, 2),
							level: i,
							list: list
						})
					}
					//console.log(datas)
					for (var i = 0; i < datas.length; i++) {
						for (var k = i + 1; k < datas.length; k++) {
							if (datas[i].index > datas[k].index) {
								let temp = datas[i]
								datas[i] = datas[k]
								datas[k] = temp
							}
						}
					}
					this.tableData = datas
					//console.log("课表1",this.tableData)
					this.tableData.map(v => {
						if(v.list==''){
							this.tableFlag=true
						}else{
							this.tableFlag=false
						}
					});
				}
			})
		},
		//获取选中班级id
		getclassid(classid) {
			this.classid = classid;
			this.classlist.forEach(v => {
				//console.log(v)
				if (v.clazzId == this.classid) {
					this.classname = v.clazzName
				}
			});
			this.tableData = []
			this.showRandomClassTable();
		},
	},
	mounted() {
		this.getclass();
	},
}
</script>



<style lang="less">
.courseclass {
	padding: 40px;

	.el-table thead {
		color: #333;

	}




	.navget {
		position: absolute;
		top: 0;
		left: 0;
	}

	.coursechoose {
		position: absolute;
		width: 15% !important;
		left: 150px;
		top: 0;
	}

	.coursesearchbtn {
		position: absolute;
		left: 380px;
		top: 0;
	}

	.changeclass {
		position: absolute;
		right: 180px;
		top: 0;
		font-size: 16px;
		border-radius: 4px;
	}

	.addclass {
		position: absolute;
		right: 50px;
		top: 0;
		font-size: 16px;
		border-radius: 4px;
	}


	.el-table td.el-table__cell div {

		text-align: center;
	}

	.el-table th.el-table__cell>.cell {
		text-align: center;
	}

	.tableFrom {
		padding: 20px;
		background: white;
		text-align: center;
		margin-top: 40px;
	}

	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: 1px solid #333;
	}

	.el-table--border,
	.el-table--group {
		border: 1px solid #333;
	}

	.el-table--border .el-table__cell,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
		border-right: 1px solid #333;
	}
}
</style>